<!doctype html>
<html>
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>中国民网</title>
<meta name="keywords" content="中国民网"/>
<meta name="description" content="我的网站中国民网"/>
<link rel="stylesheet" type="text/css" href="/Public/Admin/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/Public/Home/TemplateDefault/css/default.css">
<link rel="stylesheet" type="text/css" href="/Public/Home/TemplateDefault/css/swiper.min.css">
<link rel="stylesheet" type="text/css" href="/Public/Admin/bootstrap/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/Public/Home/TemplateDefault/css/picbox.css">
<script src="/Public/Admin/bootstrap/js/jquery.min.js"></script><script src="/Public/Home/TemplateDefault/js/jquery.SuperSlide.2.1.1.js"></script><script src="/Public/Admin/bootstrap/js/bootstrap.min.js"></script><script src="/Public/Home/TemplateDefault/js/swiper.min.js"></script><script src="/Public/Home/TemplateDefault/js/picbox.js"></script><script src="/Public/Home/TemplateDefault/js/jquery.carousel.min.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QMDvD2Anle2gLOINIBUZ1Lhh"></script>
</head>
<body>
<div class="container">
  
  <style>	    
.myBox7262{
			width:auto;height:auto;background-color:#fff;background-position:center center;background-repeat:no-repeat;margin:0 auto 0 auto;		}
  
    .swiper-container{
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide{
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
	.swiper-slide a{display:block; width:100%;}
      .myBox7341 .cartButton .col{padding:0;}
  .myBox7341 .cartButton .col .btn{border:none; height:50px; line-height:50px; padding:0 12px; font-weight:bold; font-size:1.3em;}
  .myBox7341 .remark{color:#f00; padding:0 8px; font-size:12px;}
  
  .myBox7341 .price{padding:0 8px;}
  .myBox7341 .dgscp-c{padding:0 8px;}
  .myBox7341 .dgscp-c .bt strong{color:#7B7B7B;}
  .myBox7341 .share{ vertical-align:middle; text-align:center;}
  .myBox7341 .share .fa{width:30px; height:30px; line-height:30px; text-align:center; color:#FF5252; font-size:18px; border-radius:20px; border:1px solid #ccc;}
  
  
  
  
.myBox7341 .cartButton .col .fa{color:#F10B47;}
  .myBox7341 img{max-width:100%;}
  .myBox7341 .badge{background:none; color:#333;}
  .myBox7341 .badge i{font-size:0.7em;}
  .myBox7341 .panel-body{padding:5px}
  .myBox7341 .panel{border-radius:0; margin-bottom:0; border:none; box-shadow:none;}
  .myBox7341 .panel-heading{border-radius:0;}
  .myBox7341 .panel-heading .badge{float:right;}
  .myBox7341 .list-group{margin-bottom:0;}
  .myBox7341 .panel-body{} 
  .myBox7341{width:auto;height:auto;background-color:#fff;background-position:center center;background-repeat:no-repeat;margin:0 auto 0 auto;}
  
.myBox7342 .panel-heading{padding:0;}
.myBox7342 .panel-heading .panel-title{
	text-align:center;
	padding:0;
	font-size:16px;
	color:#000;
	font-weight:1;
	height:30px;
	line-height:2;
			background-repeat:no-repeat;		
}


	    .myBox7342{
			width:auto;height:auto;background-color:#fff;background-position:center center;background-repeat:no-repeat;margin:0 auto 0 auto;		}
        
        .myBox7342 .panel-body .caption{padding:0.3em 1em;}
        .myBox7342 .panel-body .price{margin-bottom:0; line-height:2em; color:#f00; font-weight:bold;}
  .myBox7342 .panel-body{padding:5px}
  .myBox7342 .panel{border-radius:0; margin-bottom:0;}
  .myBox7342 .panel-heading{border-radius:0;}
  .myBox7342 .panel-heading .badge{float:right;}
  .myBox7342 .list-group{margin-bottom:0;}
  .myBox7342 .thumbnail{margin:1px 0;}
  .myBox7342 .col-md-3.col-xs-6.col-sm-4{padding-left:1px; padding-right:1px;}
  
  .myBox7342 .thumbnail .datetime{display:none;}
  .myBox7342 .thumbnail h3{margin-bottom:0; margin-top:0;}
  .myBox7342 .thumbnail h3 a{color:#333; font-weight:normal;}
  
  #sedAttr{padding:10px; border:1px solid #ccc; background:#fff;}
	#sedAttr .cur{color:#fff; background:#d72557;}
	#sedAttr li{margin:5px; padding:5px 0px;}
	#sedAttr li span{float:left; font-size:20px; text-indent:0.5em;}
	#senAttr li ul{float:left; height:30px;}
	#sedAttr li ul li{display:inline; padding:0px 5px; margin:0px;}
	#sedAttr li ul li a{padding:0 5px; font-size:20px;}
</style>
  <div class="row clearfix">
    <div class="col-xs-12 col-md-12 column">
      
      <div class="viewBox myBox7341">
          <div class="panel-body">
            <style type="text/css">
.bh-sku-selected {color: red; background:#fff; border:1px solid #FF0033;}
input{border:1px solid #ccc; border-radius:0px; background:#fff; outline:none; border-radius:2px;}
input[disabled="disabled"]{border:1px solid #ccc; background:#eee; color:#fff;}
</style>
            <link type="text/css" rel="stylesheet" href="/sku/css/shCore.css" />
            <link type="text/css" rel="stylesheet" href="/sku/css/shCoreDefault.css"/>
            <script type="text/javascript" src="/sku/js/json2.js"></script><script type="text/javascript" src="/sku/js/shCore.js"></script><script type="text/javascript" src="/sku/js/shBrushJScript.js"></script><script type="text/javascript">SyntaxHighlighter.all();</script><script type="text/javascript">var startTime = new Date().getTime();
var data = {$SKU};


$(document).ready(function(e) {
    setSKU();
});
//后台读取结果集

//保存最后的组合结果信息
var SKUResult = {};
//获得对象的key
function getObjKeys(obj) {
    if (obj !== Object(obj)) throw new TypeError('Invalid object');
    var keys = [];
    for (var key in obj)
        if (Object.prototype.hasOwnProperty.call(obj, key))
            keys[keys.length] = key;
    return keys;
}

//把组合的key放入结果集SKUResult
function add2SKUResult(combArrItem, sku) {
	var key = combArrItem.join(";");
    if(SKUResult[key]) {
        SKUResult[key].count += sku.count;
        SKUResult[key].prices.push(sku.price);
    } else {
        SKUResult[key] = {
            count : sku.count,
            prices : [sku.price]
        };
    }
}

//初始化得到结果集
function initSKU() {
    var i, j, skuKeys = getObjKeys(data);
    for(i = 0; i < skuKeys.length; i++) {
        var skuKey = skuKeys[i];//一条SKU信息key
        var sku = data[skuKey];	//一条SKU信息value
        var skuKeyAttrs = skuKey.split(";"); //SKU信息key属性值数组
		skuKeyAttrs.sort(function(value1, value2) {
			return parseInt(value1) - parseInt(value2);
		});

        //对每个SKU信息key属性值进行拆分组合
		var combArr = combInArray(skuKeyAttrs);
		for(j = 0; j < combArr.length; j++) {
			add2SKUResult(combArr[j], sku);
		}

        //结果集接放入SKUResult
        SKUResult[skuKeyAttrs.join(";")] = {
            count:sku.count,
            prices:[sku.price]
        }
    }
}

/**
 * 从数组中生成指定长度的组合
 * 方法: 先生成[0,1...]形式的数组, 然后根据0,1从原数组取元素，得到组合数组
 */
function combInArray(aData) {
	if(!aData || !aData.length) {
		return [];
	}

	var len = aData.length;
	var aResult = [];

	for(var n = 1; n < len; n++) {
		var aaFlags = getCombFlags(len, n);
		while(aaFlags.length) {
			var aFlag = aaFlags.shift();
			var aComb = [];
			for(var i = 0; i < len; i++) {
				aFlag[i] && aComb.push(aData[i]);
			}
			aResult.push(aComb);
		}
	}
	
	return aResult;
}


/**
 * 得到从 m 元素中取 n 元素的所有组合
 * 结果为[0,1...]形式的数组, 1表示选中，0表示不选
 */
function getCombFlags(m, n) {
	if(!n || n < 1) {
		return [];
	}

	var aResult = [];
	var aFlag = [];
	var bNext = true;
	var i, j, iCnt1;

	for (i = 0; i < m; i++) {
		aFlag[i] = i < n ? 1 : 0;
	}

	aResult.push(aFlag.concat());

	while (bNext) {
		iCnt1 = 0;
		for (i = 0; i < m - 1; i++) {
			if (aFlag[i] == 1 && aFlag[i+1] == 0) {
				for(j = 0; j < i; j++) {
					aFlag[j] = j < iCnt1 ? 1 : 0;
				}
				aFlag[i] = 0;
				aFlag[i+1] = 1;
				var aTmp = aFlag.concat();
				aResult.push(aTmp);
				if(aTmp.slice(-n).join("").indexOf('0') == -1) {
					bNext = false;
				}
				break;
			}
			aFlag[i] == 1 && iCnt1++;
		}
	}
	return aResult;
} 



//初始化用户选择事件
function setSKU() {
	initSKU();
	
	var endTime = new Date().getTime();
	$('#init_time').text('init sku time: ' + (endTime - startTime) + " ms");
	$('.sku').each(function() {
		var self = $(this);
		var attr_id = self.attr('attr_id');
		if(!SKUResult[attr_id]) {
			self.attr('disabled', 'disabled');
		}
	}).click(function() {
		var self = $(this);

		//选中自己，兄弟节点取消选中
		self.toggleClass('bh-sku-selected').siblings().removeClass('bh-sku-selected');
		
		//已经选择的节点
		var selectedObjs = $('.bh-sku-selected');

		if(selectedObjs.length) {
			//获得组合key价格
			var selectedIds = [];
			selectedObjs.each(function() {
				selectedIds.push($(this).attr('attr_id'));
			});
			selectedIds.sort(function(value1, value2) {
				return parseInt(value1) - parseInt(value2);
			});
			var len = selectedIds.length;
			var prices = SKUResult[selectedIds.join(';')].prices;
			var maxPrice = Math.max.apply(Math, prices);
			var minPrice = Math.min.apply(Math, prices);
			$('#price').text(maxPrice > minPrice ? minPrice + "-" + maxPrice : maxPrice);
			$('#stock').html(SKUResult[selectedIds.join(';')].count);

			//用已选中的节点验证待测试节点 underTestObjs
			$(".sku").not(selectedObjs).not(self).each(function() {
				var siblingsSelectedObj = $(this).siblings('.bh-sku-selected');
				var testAttrIds = [];//从选中节点中去掉选中的兄弟节点

				if(siblingsSelectedObj.length) {
					var siblingsSelectedObjId = siblingsSelectedObj.attr('attr_id');
					for(var i = 0; i < len; i++) {
						(selectedIds[i] != siblingsSelectedObjId) && testAttrIds.push(selectedIds[i]);
					}
				} else {
					testAttrIds = selectedIds.concat();
				}
				testAttrIds = testAttrIds.concat($(this).attr('attr_id'));
				testAttrIds.sort(function(value1, value2) {
					return parseInt(value1) - parseInt(value2);
				});
				if(!SKUResult[testAttrIds.join(';')]) {
					$(this).attr('disabled', 'disabled').removeClass('bh-sku-selected');
				} else {
					$(this).removeAttr('disabled');
				}
			});
		} else {
			//设置默认价格
			$('#price').text('50.00');
			$('#stock').html('123');
			//设置属性状态
			$('.sku').each(function() {
				SKUResult[$(this).attr('attr_id')] ? $(this).removeAttr('disabled') : $(this).attr('disabled', 'disabled').removeClass('bh-sku-selected');
			})
		}
	});
}
</script>
            <div class="panel panel-default">
              <div class="panel panel-default">
                <h1 style="border-top:1px solid #ccc; margin-top:0; padding-top:0.5em; padding-left:0.5em; padding-right:0.5em; font-size:18px;">{$info.title}</h1>
                
                <div style="position:relative; padding-bottom:10px; padding-top:10px;">
                  <p class="price"><strong style="color: #f00;" >¥<span id="price" style="font-size:24px; font-family:Arial;">50.00</span></strong><!-- 折扣 --><!-- 折扣结束 --></p>
                  <p class="price" style="padding-top:10px;"> 库存：<span id="stock">123</span>　　销量：<span id="saleBox">123</span></p>
                  
                </div>
                <div class="panel-footer" style="padding:0; background:#fff;" >
                  <p style="margin-bottom:4px;"></p>
                  <?php foreach($skuList as $key => $voattr){?>
         
         <p style="margin-bottom:4px;"></p>
         
          <div class="dgscp-c" style="display:table">
          
          
          <h5 class="bt" style="display:table-cell; min-width:40px;"><strong><?php echo $voattr['title'];?></strong></h5>
          
          
          
          <div style="display:table-cell;"><?php foreach($voattr['list'] as $key => $vattr){?>
          <input class="sku" type="button"  attr_id="<?php echo $vattr['id'];?>" value="<?php echo $vattr['val'];?>" style="margin:5px;"/>
          <?php }?></div>
          
          
          
          </div>
          
          <?php }?>
                  <p style="margin-bottom:10px; border-top:1px solid #CDCDCD; margin-top:5px;"></p>
                  <div class="dgscp-c" style="display:table; width:100%;">
                    <h5 class="bt" style="display:table-cell; vertical-align:middle; max-width:15px;"><strong style="color:#000;">数量</strong></h5>
                    <div style="display:table-cell; max-width:40px;">
                      <div class="input-group input-group-sm"><span class="input-group-btn">
                        <button style="margin-right:-2px;" class="btn btn-default sub_" type="button">-</button>
                        </span>
                        <input id="total_" class="form-control cartNum" style="text-align:center; box-shadow:none;" goods_id="" goods_title="" goods_price="" goods_attr="" type="text" name="" value="1">
                        <span class="input-group-btn">
                        <button class="btn btn-default add_" type="button">+</button>
                        </span></div>
                    </div>
                    
                    
                  </div>
                  <p style="margin-bottom:5px; border-top:1px solid #CDCDCD; margin-top:10px;"></p>
                </div>
              </div>
            </div>
            <div style="clear:both;"></div>
            <!-- 下方按钮 -->
            <button type="button" class="btn-success btn btn-lg" style="display:block; width:100%;">确认添加</button>
            <!-- 下方按钮结束 -->
            <div style="clear:both"></div>
            <script>$('.add_').click(function(e) {
	var val = $(this).parent().prev('input').eq(0).val()*1;
	$(this).parent().prev('input').eq(0).val(val + 1);
	
	
}); 
$('.sub_').click(function(e) {
    var val = $(this).parent().next('input').eq(0).val()*1;
	if(val > 1){
		$(this).parent().next('input').eq(0).val(val - 1);
	}
});

	function addCart(){
		var attr = new Array();
		$('.bh-sku-selected').each(function(index, element) {
            attr.push($(this).attr('attr_id'));
        });
		$.ajax({
			url:"/13/Cart/insert.html",
			data:"cart=1&title=这是一个测试商品&id=11:"+attr.join(';')+"&total="+$('#total_').val()+"&price="+$('#price').html(),
			type:'POST',
			dataType:"html",
			success: function(data){
				if(data > 0){
					updateCartNum();
					var successBox = $('#successBox');
					successBox.show();
					successBox.animate({opacity:0.8},'','',function(){
						
						setTimeout(function(){successBox.hide();successBox.css({opacity:0});},500);
						
					});
					$('#gotoCart').show();
					//success('成功加入购物车');
				}else{
					error(data);
				}
			}
		});
	}
	
	function addCart_quick(){
		var attr = new Array();
		$('.bh-sku-selected').each(function(index, element) {
            attr.push($(this).attr('attr_id'));
        });
		$.ajax({
			url:"/13/Cart/insert.html",
			data:"cart=1&title=这是一个测试商品&id=11:"+attr.join(';')+"&total="+$('#total_').val()+"&price="+$('#price').html(),
			type:'POST',
			dataType:"html",
			success: function(data){
				if(data > 0){
					location.href = '/13/Cart/index/isLogin/1.html';
				}else{
					error(data);
				}
			}
		});
	}
	
	function updateCartNum(){
		$.post('/13/Cart/getCount.html?'+new Date().getTime(), {}, function(data){
			$('#cartNum').html(data);
			
			$('#cartNum').animate({'font-size':'12px','font-weight':'bold'},'','',function(){
				$('#cartNum').animate({'font-size':'10px','font-weight':'normal'});
			});
			$('#cartNum').show(100);
		},'html');
	}
	 
	$(document).ready(function(e) {
		$(document.body).append('<div style="height:50px;"></div>');
        updateCartNum();
		/* 库存和销量 */
		$.get('/13/Ajax/getStockAndSale.html',{id:11},function(data){
			$('#saleBox').html(data.sale);
			$('#stock').html(data.stock);
			$('#zannum').html(data.zan+'次');
		},'json');
    });
	
	function zan(){
		$.get('/13/Ajax/ProductZan.html', {id:11}, function(data){
			if(data.status == 1){
				$('#zannum').html(data.data+'次');
			}else{
				error(data.info);
			}
		},'json');
	}
</script></div>
        </div>
      </div>
      
    </div>
  </div>
  <style>
</style>
</div>
<link rel="stylesheet" type="text/css" href="/Public/Js/validform/style.css">
<link rel="stylesheet" type="text/css" href="/Public/Js/validform/css/jqtransform.css">


</body>
</html>